<template>
	<view class="authenticate">
		<view class="auth" >
			<view class="auth-banner">
				<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/banner.png" mode="widthFix"></image>
			</view>
			
			<view class="auth-text">
				<text>请扫描证件信息</text>
				<text>扫描时请保持环境光线充足不要反光</text>
			</view>
			
			<view class="auth-picture">
				<view class="auth-picture-content height_108">
					<view class="info">
						<text><text>*</text>行驶证主页</text>
						<text class="padding_10">点击上传行驶证<text>主页</text></text>
					</view>
					<view class="img">
						<uploadImg :width="300" :height="176" uploadText="添加图片" @deleteImg="handleDel('license')" @handleImg="handleLicense"/>
					</view>
				</view>
				
				<view class="auth-picture-content height_108">
					<view class="info">
						<text>车头照片</text>
						<text>能看到车牌和车辆外观</text>
					</view>
					<view class="img">
						<uploadImg :width="300" :height="176" uploadText="添加图片" @deleteImg="handleDel('car')" @handleImg="handleCar"/>
					</view>
				</view>
				
				<!-- <view class="auth-picture-content height_49">
					<view class="info">
						<text>邀请码</text>
					</view>
					<view class="input">
						<input class="uni-input" v-model="inviteCode" placeholder="填入邀请码" placeholder-style="color:rgba(#000000, .45);"/>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="bottom">
			<u-button text="提交" color="#CF1A1B" :disabled="disabled" @click="handleSubmit"></u-button>
		</view>
		
		<u-modal style="height: 0;" :show="show" confirmText="我知道了" confirmColor="#CF1A1B" @confirm="show=false">
			<view class="slot-content modal">
				<image class="modal-img" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/icon_error.png"></image>
				<text class="modal-text">无法识别您上传的证件，请根据要求重新上传</text>
			</view>
		</u-modal>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	
	export default {
		components: { uploadImg },
		data() {
			return {
				fileList1: [],
				show: false,
				licenseUrl:'',
				licenseInfo: '',
				carUrl: '',
				inviteCode: '',
				disabled: true
			};
		},
		methods: {
			async handleLicense(url){ // 校验行驶证照片
				this.licenseUrl = url
				try{
					const res = await this.$request({
						method: 'POST',
						url: '/user-center/new-terminal/ocrCard',
						data: {
							cardType: '3', //1:身份证识别，2:营业执照识别，3：行驶证识别
							imageUrl: url
						}
					})
					
					this.licenseInfo = res.datas.frontInfo
					this.disabled = false
				}catch(e){
					this.show = true
					setTimeout(()=>{
						this.show = false
					},3000)
				}
			},
			handleDel(flag) {
				if (flag === 'car') {
					this.carUrl = ''
				} else {
					this.licenseUrl = ''
					this.disabled = true
				}
			},
			handleCar(url) {
				this.carUrl = url
			},
			handleSubmit() {
				if (!this.licenseUrl) {
					this.$refs.uToast.show({
						message: '请上传行驶证主页照片',
						type: 'default'
					})
					return
				}
				this.licenseInfo.licenseUrl = this.licenseUrl
				this.licenseInfo.carUrl = this.carUrl
				uni.navigateTo({
					url: `/indexPack/car/license?info=${JSON.stringify(this.licenseInfo)}`
				});
			}
		}
	}
</script>

<style lang="scss">
.padding_10 {
	padding-left: 10rpx;
}
.height_108 {
	height: 108px;
}
.height_49 {
	height: 49px;
}
.authenticate {
	width: 100%;
	height: 100%;
}
.auth {
	height: calc(100% - 70px);
	overflow-y: auto;
	
	.auth-banner {
		height: 174px;
		image {
			width: 100%;
		}
	}
	.auth-text {
		padding: 30rpx 32rpx;
		display: flex;
		flex-direction: column;
		text {
			&:first-child {
				font-size: 28px;
			}
			&:last-child {
				font-size: 12px;
				color: rgba(#000000, .65);
				padding: 26rpx 0 0 10rpx;
			}
		}
	}
	.auth-picture {
		margin: 0 20rpx;
		&-content {
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				flex-direction: column;
				line-height: 70rpx;
				padding-left: 50rpx;
				text {
					&:nth-child(1) {
						font-size: 14px;
						color: rgba(#000000, .65);
						text {
							color: #F15757;
						}
					}
					&:nth-child(2) {
						font-size: 12px;
						text {
							color: #CF1A1B;
						}
					}
				}
			}
			.img {
				padding-right: 24rpx;
				/deep/ .u-upload__button {
					margin: 0;
				}
				/deep/ .u-upload__button .u-icon__icon{
					font-size: 40px !important;
				}
				/deep/ .u-upload__button__text {
					font-size: 12px;
					margin-top: 26rpx;
				}
			}
			.input {
				width: 200rpx;
				padding-right: 24rpx;
			}
		}
	}
}


.bottom {
	height: 70px;
	width: 100%;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	/deep/ .u-button {
		width: 90% !important;
	}
}

.modal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	&-img {
		width: 65px;
		height: 69px;
	}
	&-text {
		font-size: 30rpx;
		margin-top: 30rpx;
		color: rgba(#000000, .85);
	}
}
</style>
